<template>
  <view class="content">
	<view class="header" :style="headerStyle">
		<scroll-view scroll-x="true" :scroll-left="headerScrollLeft" :scroll-with-animation="true" >
			<view class="header-wrapper">
				<view 
					class="header-item"
					v-for="(item, index) in headers"
					:key="item.id"
					:class="{active: headerActiveIndex === index}"
					@click="handleSelectHeader(index,item)"
				>{{item.title}}</view> 
			</view>
		</scroll-view>
	</view>
	<view class="main" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
		<view class="card-list" :style="cardListStyle">

			<view class="card-item" :style="cardItemStyle" v-for="origin in info.renderList" :key="origin.id">
				<video-card
					class="video-card-wrapper"
					:value="origin"
					:isActiving="info.origins[info.index].id === origin.id"
					:commentVisible="commentVisible"
					@onTouchStatus="onTouchStatus"
					@openComment="openComment"
				></video-card>
			</view>
		</view>
	</view>
    <view class="footer">
		<view class="footer-item">首页</view>
		<view class="footer-item">朋友</view>
		<view class="footer-item">图片</view>
		<view class="footer-item">消息</view>
		<view class="footer-item">我</view>
	</view>
	<!-- 评论组件 -->
	<video-comment v-model:visible="commentVisible"></video-comment>
  </view>
</template>

<script>
import { getElementInfo, getElementsInfo } from '../../utils/utils.js'
export default {
  data() {
    return {
      title: 'Hello12',
	  menuButtonInfo: {
		bottom: 80,
		height: 32,
		left: 281,
		right: 368,
		top: 48,
		width: 87,
	  }, // 胶囊按钮位置信息
	  headers: [
		  { title:'直播', id: 'live' }, 
		  { title:'郑州', id: 'city' }, 
		  { title:'团购', id: 'tg' }, 
		  { title:'关注', id: 'gz' }, 
		  { title:'商城', id: 'sc' }, 
		  { title:'推荐', id: 'tj' }, 
	  ],
	  headerActiveIndex: 0,
	  info: {
		  origins: [
            {
              id: 1,
              url:
                'https://www.douyin.com/aweme/v1/play/?video_id=v0d00fg10000cj1lq4jc77u0ng6s1gt0&line=0&file_id=bed51c00899b458cbc5d8280147c22a1&sign=7749aec7bd62a3760065f60e40fc1867&is_play_url=1&source=PackSourceEnum_PUBLISH'
            },
            {
              id: 2,
              url:
                'https://www.douyin.com/aweme/v1/play/?video_id=v0200fg10000cbn2sfbc77u0vpvt4ei0&line=0&file_id=692d7d4f382f40e8a571a40e35f0c887&sign=6acbd42bf63d4a70836d80e20afe60f7&is_play_url=1&source=PackSourceEnum_PUBLISH'
            },
            {
              id: 3,
              url:
                'https://www.douyin.com/aweme/v1/play/?video_id=v0300fg10000c4s7r3rc77u313isbq90&line=0&file_id=79a7251ebd49450e87dff8c6c2045193&sign=bfbfd045b09a5fffe2175c946ae37716&is_play_url=1&source=PackSourceEnum_PUBLISH'
            },
            {
              id: 4,
              url:
                'https://www.douyin.com/aweme/v1/play/?video_id=v0d00fg10000cdgfmbjc77uf8ildvr1g&line=0&file_id=3666bdea2f5e40d1b3e4643618c4263b&sign=ea304bf093956b3f1899ef2a3dd7221b&is_play_url=1&source=PackSourceEnum_PUBLISH'
            },
            {
              id: 5,
              url:
                'https://www.douyin.com/aweme/v1/play/?video_id=v0200fa50000bqv2ovedm15352jvv5vg&line=0&file_id=efac24de9d2548228975fc8429e5bdcb&sign=3b7c4acc3b831e92448d6909510074c0&is_play_url=1&source=PackSourceEnum_PUBLISH'
            },
            {
              id: 6,
              url:
                'https://www.douyin.com/aweme/v1/play/?video_id=v0300fg10000cambmmjc77u9qb0i0cqg&line=0&file_id=cae9ebb5eda04242862d0944c1cb91a1&sign=918f1ee6d41643343153beded9c750ff&is_play_url=1&source=PackSourceEnum_PUBLISH'
            },
            {
              id: 7,
              url:
                'https://www.douyin.com/aweme/v1/play/?video_id=v0d00fg10000ckvoc03c77u6kchehqhg&line=0&file_id=8e6beec8376d44379c8e1c07edfde8fd&sign=be07da27aece6115bb08874089acd485&is_play_url=1&source=PackSourceEnum_PUBLISH'
            },
            {
              id: 8,
              url:
                'https://www.douyin.com/aweme/v1/play/?video_id=v0300fe30000c0a35fnsml2qmkctkcsg&line=0&file_id=27fe563493c447dca8bcd98067b2a9b9&sign=bb8f5c705f6466d41de94434e182013e&is_play_url=1&source=PackSourceEnum_PUBLISH'
            }
          ],
		  index: 0,
		  renderSize: 3, // 渲染条数 
		  renderList: [],
		  offset: 0,
		  touchInfo: {
			  isStart:false,
			  startY: 0
		  },
		  cardListInfo: {
			  height: 600,
			  initTranslateY: 0, // 触摸开始时的位置
			  translateY: 0 ,// 实时位置
			  animate: false, // 是否开启动画
		  },
		 
	  },
	  
	  commentVisible: false, // 评论是否展示
	  sliderTouchStatus: false ,// 进度条的触摸状态 true正在触摸 false未触摸
    }
  },
  computed: {
	  cardListStyle () {
		  return {
			  transform: `translate3d(0, ${this.info.cardListInfo.translateY}px, 0)`,
			  transition: this.info.cardListInfo.animate ? 'transform .3s linear' :'none'
		  }
	  },
	  cardItemStyle () {
		  return {
			  top: `${this.info.offset * this.info.cardListInfo.height}px`
		  }
	  },
	  headerStyle () {
		  const gap = 10 // 左右
		  const height = 30 // header高度
		  return {
			  left: `${gap}px`,
			  width: `${this.menuButtonInfo.left - gap * 2}px`,
			  top: `${this.menuButtonInfo.bottom - height}px`
		  }
	  },
	  // header滚动距离
	  headerScrollLeft () {
		  return this.headers[this.headerActiveIndex].scrollX || 0
	  }
  },
  mounted () {
	  this.init()
  },
  watch:{
	  'info.index': {
		  handler (v) {
			 const { list, offset } = this.getRenderListAndOffset()
			 this.info.renderList = list
			 this.info.offset = offset
		  },
		  immediate: true
	  }
  },
  methods: {
	  async init () {
		 // 获取cardList的高度
		 const info = await getElementInfo(this, '.card-list') 

		 this.info.cardListInfo.height = info.height
		// 获取系统信息
		
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// console.log(this.menuButtonInfo)
		// uni.getSystemInfo({
		// 	success(res) {
		// 		console.log(res)
		// 		// that.actionHeight = (res.statusBarHeight * 2 + 90) + 'rpx'
		// 		// that.statusBarHeight = '90rpx'
		// 	}
		// })
		// 计算header每个元素要在中间显示，需要横向滚动的距离
		const headerInfo = await getElementInfo(this, '.header') 
		const headerItemsInfo = await getElementsInfo(this, '.header .header-item') 

		const centerPosition = headerInfo.width / 2
		headerItemsInfo.forEach((one, index) => {
			// 元素相对于header的横向距离
			const disX = one.left - headerInfo.left
			const scrollX = one.width / 2 + disX - centerPosition
			// 设置偏移量
			this.$set(this.headers, index, {...this.headers[index], scrollX})
			
		})
	  },
	  onTouchStart(e){
		  // 执行动画期间禁止触摸滚动
		  if (this.info.cardListInfo.animate) return false
		  // 进度条正在触摸时禁止滚动
		  if (this.sliderTouchStatus) return false
		  this.info.touchInfo.isStart = true
		  this.info.touchInfo.startY = e.touches[0].clientY
	  },
	  onTouchMove(e){
		  if (!this.info.touchInfo.isStart) return false
		  const disY = e.touches[0].clientY - this.info.touchInfo.startY
		  this.info.cardListInfo.translateY = this.info.cardListInfo.initTranslateY + disY
	  },
	  onTouchEnd(e){
		  this.info.touchInfo.isStart = false
		  this.info.cardListInfo.animate = true
		  const disY = this.info.cardListInfo.translateY - this.info.cardListInfo.initTranslateY
		  let nextIndex = this.info.index
		  if (Math.abs(disY) >= 150) {
			  if (disY > 0) { // 下滑
				  nextIndex--
			  } else { // 上滑
				  nextIndex++
			  }
		  }
		  // 避免下表越界
		  nextIndex = Math.min(Math.max(0, nextIndex), this.info.origins.length - 1)
		
		  this.info.cardListInfo.translateY = -nextIndex * this.info.cardListInfo.height
		  
		  setTimeout(() => {
			  this.info.cardListInfo.animate = false
			  this.info.index = nextIndex
			  this.info.cardListInfo.initTranslateY = this.info.cardListInfo.translateY
		  }, 300)
	  },
	  
	  getRenderListAndOffset () {
		  const { origins, renderSize, index } = this.info
		  if (origins.length <= renderSize) {
			  return {
				  list: origins,
				  offset: 0
			  }
		  }
		  // 中间值
		  const middleNum = Math.floor(renderSize / 2)
		  if (index <= middleNum) {
			  return {
				  list: origins.slice(0, renderSize),
				  offset: 0
			  }
		  } else if (index >= (origins.length - middleNum)) {
			  return {
					  list: origins.slice(-renderSize),
					  offset: origins.length - renderSize,
			  }
		  } else {
			  return {
				  list: origins.slice(index - middleNum, index + middleNum + 1),
				  offset: index - middleNum,
			  }
		  }
	  },
	  handleSelectHeader (index) {
		  this.headerActiveIndex = index
	  },
	  onTouchStatus (v) {
		  console.log('是否禁止滚动', v)
		  this.sliderTouchStatus = v
	  },
	  // 点击打开评论
	  openComment () {
		  this.commentVisible = true
		  
	  }
	  
  },
}
</script>

<style lang="scss">
page {
	background-color: #161616;
	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.header {
			// background-color: blue;
			overflow: auto;
			position: absolute;
			z-index: 1;
			height: 60upx;
			display: flex;
			align-items: center;
			.header-wrapper {
				display: flex;
				gap: 40upx;
				align-items: center;
				font-size: 30upx;
				color: #bbb;
				.header-item {
					flex-shrink: 0;
					transition: all .3s linear;
					&.active {
						color: #fff;
						font-weight: bold;
					}
				}
			}
			
		}
		.main {
			flex: 1;
			// background-color: #161616;
			width: 100vw;
			overflow: hidden;
			.card-list {
				height: 100%;
				.card-item {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 300upx;
					position: relative;
					color: #fff;
					.video-card-wrapper {
						width: 115%;
						height: 100%;
					}
				}
			}
		}
		.footer {
			height: 80upx;
			// background-color: chocolate;
			padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS 11.2 以下
			padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS 11.2 以上
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 40upx;
			padding-right: 40upx;
			background-color: #161616;
			.footer-item {
				font-size: 30upx;
				font-weight: bold;
				color: #bbb;
			}
		}
	}
}
</style>
